<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="模板名称">
                <a-input
                  v-model="keywords"
                  placeholder="请输入模板名称"
                  @pressEnter="$refs.template.refresh(true)"
                  style="width:342px;"
                >
                  <a-tooltip slot="suffix" title="请输入模板名称">
                    <a-icon
                      type="search"
                      style="color: rgba(0,0,0,.45)"
                      @click="$refs.template.refresh(true)"
                    />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="适用类型">
                <a-select
                  v-model="queryParam.type"
                  allowClear
                  placeholder="请选择适用类型"
                  style="width:342px;"
                >
                  <a-select-option :value="1">成长档案</a-select-option>
                  <a-select-option :value="2">课后作业</a-select-option>
                  <a-select-option :value="3">课后点评</a-select-option>
                  <a-select-option :value="4">成绩单</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="创建人">
                <a-select
                  v-model="queryParam.create_user_id"
                  placeholder="请选择创建人"
                  allowClear
                  style="width:342px;"
                >
                  <a-select-option
                    v-for="(item,index) in creat_list"
                    :key="index"
                    :value="item.create_user_id"
                  >{{item.create_user_name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <div v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="创建日期">
                  <a-range-picker @change="changeDate" />
                </a-form-item>
              </a-col>
            </div>
          </a-row>
        </a-form>
        <a style="cursor:pointer" v-if="advanced" @click="advanced = !advanced" id="moreButton">
          收起
          <a-icon type="up"></a-icon>
        </a>
        <a style="cursor:pointer" v-if="!advanced" @click="advanced = !advanced" id="moreButton">
          展开
          <a-icon type="down"></a-icon>
        </a>
        <div class="template_btn" style="margin-bottom:20px;">
          <a-button type="primary" @click="addModel()">新增模板</a-button>
          <span @click="templateModal=true">
            <a-icon type="question-circle" />
            <a>&nbsp;模板使用说明</a>
          </span>
        </div>
        <div class="template_table">
          <s-table
            ref="template"
            size="default"
            rowKey="key"
            :columns="columns"
            :data="loadData"
            class="user_management_table"
          >
            <div class="template_name" slot="name" slot-scope="text,record">
              <div class="template_img">
                <img :src="record.image" width="100%" height="100%" alt />
              </div>
              <div class="template_nameExpand">
                <div class="name">
                  <span class="template_title">{{record.name}}</span>
                  <span v-if="record.is_default==0">
                    <span class="system_default_tags">系统默认</span>
                  </span>
                </div>
                <div
                  class="type"
                  style="margin-top:5px;"
                >适用类型：{{record.type==1?'成长档案':record.type==2?'课后作业':record.type==3?'课后点评':'成绩单'}}</div>
              </div>
            </div>
            <div class="creator_info" slot="create_info" slot-scope="text,record">
              <div class="creator_name">
                <span v-if="record.is_default==0">
                  <div>创建人：系统</div>
                  <div>创建时间：{{record.created_at}}</div>
                </span>
                <span v-else>
                  <div v-if="record.create_user">创建人：{{record.create_user.name||'--'}}</div>
                  <div v-else>创建人：--</div>
                  <div>创建时间：{{record.created_at}}</div>
                </span>
              </div>
            </div>
            <div class="new_update" slot="newUpdate" slot-scope="text,record">
              <div v-if="record.operate_user">操作人：{{record.operate_user.name||'--'}}</div>
              <div v-else>操作人：--</div>
              <div>操作时间：{{record.updated_at||'--'}}</div>
            </div>
            <div slot="encode" slot-scope="text,record">
              <a-switch
                v-model="record.is_enable==1?true:false"
                @change="changeSwitch(record.id,record.is_enable)"
              />
            </div>
            <div slot="action" slot-scope="text,record">
              <a @click="showPreview(record)">预览</a>
              <a-divider type="vertical" />
              <a @click="edit(record)">编辑</a>
              <a-divider type="vertical" />
              <a :disabled="record.is_default==0" @click="showDeleteConfirm(record.id)">删除</a>
            </div>
          </s-table>
        </div>
      </div>
      <a-modal title="模板使用说明" :visible="templateModal" @cancel="templateModal=false" :footer="null">
        <div class="tips_text">
          <div>1.学员分享成长档案/课后作业/课后点评/成绩单时，系统将自动选取已启用的模板生成分享链接；</div>
          <div>2.支持机构新增/编辑模板，支持自定义分享语和链接配图；</div>
          <div>3.系统默认模板不支持删除。</div>
        </div>
        <div class="forExample">
          <div class="title">示例</div>
          <div class="shareWay">
            <div class="first">
              <div class="title">① &nbsp;分享给微信好友</div>
              <div class="content">
                <div class="left">
                  <img src="@/assets/wechat.jpg" alt />
                </div>
                <div class="right">
                  <div class="title_text">我家王小明也在这里学习，你也一起来学习吧!</div>
                  <div class="content_text">
                    <div class="content_left">在这个学校度过的时间里，我学习，我进步，我成长……</div>
                    <div class="content_right">
                      <img src="https://devedu.weliam.cn/uploads/global/share/1.png" alt />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="second">
              <div class="title">② &nbsp;分享到朋友圈</div>
              <div class="content">
                <div class="left">
                  <img src="@/assets/wechat.jpg" alt />
                </div>
                <div class="right">
                  <div class="name_text">王小明的妈妈</div>
                  <div class="title_text">孩子在这里学习很快乐，进步很大ddd</div>
                  <div class="content_text">
                    <div class="content_left">
                      <img src="https://devedu.weliam.cn/uploads/global/share/1.png" alt />
                    </div>
                    <div class="content_right">在这个学校度过的时间里，我学习，我进步，我成长……</div>
                  </div>
                  <div class="time_text">
                    <div class="left">刚刚</div>
                    <div class="right">··</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
      <a-modal
        :title="templateType=='creat'?'新建模板':'修改模板'"
        :visible="createModal"
        @cancel="createModal=false"
        :confirmLoading="sureLoading"
        @ok="submit(templateType)"
        width="750px"
        :bodyStyle="{'overflow-y':'auto'}"
      >
        <div class="createTemplate">
          <div class="top_tips">
            <a-icon type="exclamation-circle" />&nbsp;&nbsp;根据《
            <a
              href="http://weixin.qq.com/cgi-bin/readtemplate?t=weixin_external_links_content_management_specification"
              target="_blank"
            >微信外部链接内容管理规范</a>
            》，在微信内传播的外部链接存在被封禁风险，请勿填写违规内容
          </div>
          <div class="display_flex">
            <div class="left_div">
              <div class="left_title">预览效果</div>
              <div class="left_content">
                <div class="first">
                  <div class="first_title">① 分享给微信好友</div>
                  <div class="first_content">
                    <div class="left_headimg">
                      <img src="@/assets/wechat.jpg" alt />
                    </div>
                    <div class="right_content">
                      <div class="title_text" v-if="!preview_title">我家王小明正在这里学习，你也一起来学习吧！</div>
                      <div class="title_text" v-else>{{preview_title}}</div>
                      <div class="content_text">
                        <div
                          class="content_left"
                          v-if="!preview_content"
                        >绘本亲子共读，从小激发孩子的阅读能力和语言辨识能力，培养孩子语言水平</div>
                        <div class="content_left" v-else>{{preview_content}}</div>
                        <div class="content_right">
                          <img :src="form.image" alt />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="second">
                  <div class="second_title">② &nbsp;分享到朋友圈</div>
                  <div class="second_content">
                    <div class="second_left">
                      <img src="@/assets/wechat.jpg" alt />
                    </div>
                    <div class="second_right">
                      <div class="name_text">王小明的妈妈</div>
                      <div class="title_text">孩子在这里学习很快乐，进步很大ddd</div>
                      <div class="content_text">
                        <div class="content_left">
                          <img :src="form.image" alt />
                        </div>
                        <div class="content_right" v-if="!preview_title">在这个学校度过的时间里，我学习，我进步，我成长……</div>
                        <div class="content_right" v-else>{{preview_title}}</div>
                      </div>
                      <div class="time_text">
                        <div class="left">刚刚</div>
                        <div class="right">··</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right_div">
              <div class="right_title">模板设置</div>
              <div>
                <a-form-model :model="form" :label-col="{span:5}" :wrapper-col="{span:19}">
                  <a-form-model-item label="模板名称">
                    <a-input v-model="form.name" placeholder="10字以内" />
                  </a-form-model-item>
                  <a-form-model-item label="适用类型">
                    <a-select v-model="form.type" placeholder="请选择适用类型">
                      <a-select-option :value="1">成长档案</a-select-option>
                      <a-select-option :value="2">课后作业</a-select-option>
                      <a-select-option :value="3">课后点评</a-select-option>
                      <a-select-option :value="4">成绩单</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="链接标题">
                    <a-textarea
                      v-model="form.link_title"
                      :maxLength="28"
                      placeholder="28字以内"
                      :auto-size="{ minRows: 3, maxRows: 5 }"
                      @change="changeLinkTitleIndex($event.target.selectionStart,$event.target.selectionEnd)"
                    />
                    <a-tooltip placement="top">
                      <template slot="title">
                        <div>• 点击按钮可在模板中插入占位符</div>
                        <div>
                          • 生成链接后，超过字数上限的部分将不展示
                          占位符示例：
                          模板：我家#学员姓名#在#校区名称}完成了一份新的作业，快来看看吧！
                          生成的文案：我家王小明在优胜教育完成了一份新的作业，快来看看吧！
                        </div>
                      </template>
                      <a-icon type="question-circle" />
                    </a-tooltip>&nbsp;&nbsp;
                    <a-dropdown>
                      <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                        插入占位符
                        <a-icon type="down" />
                      </a>
                      <a-menu slot="overlay">
                        <a-menu-item @click="sliceTitle('#学员姓名#',link_title_index)">
                          <a>学员姓名</a>
                        </a-menu-item>
                        <a-menu-item @click="sliceTitle('#校区名称#',link_title_index)">
                          <a>校区名称</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==1"
                          @click="sliceTitle('#档案内容#',link_title_index)"
                        >
                          <a>档案内容</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==2"
                          @click="sliceTitle('#作业标题#',link_title_index)"
                        >
                          <a>作业标题</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==2"
                          @click="sliceTitle('#作业类型#',link_title_index)"
                        >
                          <a>作业类型</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==2"
                          @click="sliceTitle('#老师#',link_title_index)"
                        >
                          <a>老师</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==3"
                          @click="sliceTitle('#班级名称#',link_title_index)"
                        >
                          <a>班级名称</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==3"
                          @click="sliceTitle('#上课老师#',link_title_index)"
                        >
                          <a>上课老师</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==4"
                          @click="sliceTitle('#考试名称#',link_title_index)"
                        >
                          <a>考试名称</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==4"
                          @click="sliceTitle('#考试科目#',link_title_index)"
                        >
                          <a>考试科目</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a-form-model-item>
                  <a-form-model-item label="链接摘要">
                    <a-textarea
                      v-model="form.abstract"
                      :maxLength="39"
                      placeholder="39字以内"
                      :auto-size="{ minRows: 3, maxRows: 5 }"
                      @change="changeLinkContentIndex($event.target.selectionStart,$event.target.selectionEnd)"
                    />
                    <a-tooltip placement="top">
                      <template slot="title">
                        <div>• 点击按钮可在模板中插入占位符</div>
                        <div>
                          • 生成链接后，超过字数上限的部分将不展示
                          占位符示例：
                          模板：我家#学员姓名#在#校区名称}完成了一份新的作业，快来看看吧！
                          生成的文案：我家王小明在优胜教育完成了一份新的作业，快来看看吧！
                        </div>
                      </template>
                      <a-icon type="question-circle" />
                    </a-tooltip>&nbsp;&nbsp;
                    <a-dropdown>
                      <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                        插入占位符
                        <a-icon type="down" />
                      </a>
                      <a-menu slot="overlay">
                        <a-menu-item @click="sliceAbstract('#学员姓名#',abstract_index)">
                          <a>学员姓名</a>
                        </a-menu-item>
                        <a-menu-item @click="sliceAbstract('#校区名称#',abstract_index)">
                          <a>校区名称</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==1"
                          @click="sliceAbstract('#档案内容#',abstract_index)"
                        >
                          <a>档案内容</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==2"
                          @click="sliceAbstract('#作业标题#',abstract_index)"
                        >
                          <a>作业标题</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==2"
                          @click="sliceAbstract('#作业类型#',abstract_index)"
                        >
                          <a>作业类型</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==2"
                          @click="sliceAbstract('#老师#',abstract_index)"
                        >
                          <a>老师</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==3"
                          @click="sliceAbstract('#班级名称#',abstract_index)"
                        >
                          <a>班级名称</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==3"
                          @click="sliceAbstract('#上课老师#',abstract_index)"
                        >
                          <a>上课老师</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==4"
                          @click="sliceAbstract('#考试名称#',abstract_index)"
                        >
                          <a>考试名称</a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="form.type==4"
                          @click="sliceAbstract('#考试科目#',abstract_index)"
                        >
                          <a>考试科目</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a-form-model-item>
                  <a-form-model-item label="选择配图">
                    <div class="template_imgArr">
                      <div
                        class="templateImg"
                        v-for="(item,index) in pics"
                        :key="index"
                        @click="changeFormImage(item)"
                      >
                        <img :src="item" alt />
                        <a-icon
                          type="check-circle"
                          theme="twoTone"
                          two-tone-color="#52c41a"
                          v-if="form.image == item"
                          class="active"
                          style="font-size:20px;"
                        />
                      </div>
                    </div>
                  </a-form-model-item>
                </a-form-model>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
      <a-modal title="预览模板" :visible="previewModal" @cancel="previewModal=false" :footer="null">
        <div class="forExample">
          <div class="shareWay">
            <div class="first">
              <div class="title">① &nbsp;分享给微信好友</div>
              <div class="content">
                <div class="left">
                  <img src="@/assets/wechat.jpg" alt />
                </div>
                <div class="right">
                  <div class="title_text">我家王小明也在这里学习，你也一起来学习吧!</div>
                  <div class="content_text">
                    <div class="content_left" v-if="!preview_content">在这个学校度过的时间里，我学习，我进步，我成长……</div>
                    <div class="content_left" v-else>{{preview_content}}</div>
                    <div class="content_right">
                      <img :src="form.image" alt />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="second">
              <div class="title">② &nbsp;分享到朋友圈</div>
              <div class="content">
                <div class="left">
                  <img src="@/assets/wechat.jpg" alt />
                </div>
                <div class="right">
                  <div class="name_text">王小明的妈妈</div>
                  <div class="title_text">孩子在这里学习很快乐，进步很大ddd</div>
                  <div class="content_text">
                    <div class="content_left">
                      <img :src="form.image" alt />
                    </div>
                    <div class="content_right" v-if="!preview_title">在这个学校度过的时间里，我学习，我进步，我成长……</div>
                    <div class="content_right" v-else>{{preview_title}}</div>
                  </div>
                  <div class="time_text">
                    <div class="left">刚刚</div>
                    <div class="right">··</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import {
  templateList,
  openOrClose,
  createTemplate,
  editTemplate,
  delTemplate,
  templateInfo,
  creatorList
} from '@/api/template'
export default {
  components: {
    STable,
    Ellipsis
  },
  data() {
    return {
      keywords: '',
      advanced: true,
      queryParam: {
        type: undefined,
        create_user_id: undefined,
        start_time: '',
        end_time: ''
      },
      advanced: false,
      columns: [
        {
          title: '模板',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '创建信息',
          dataIndex: 'create_info',
          scopedSlots: { customRender: 'create_info' }
        },
        {
          title: '最新更新',
          dataIndex: 'newUpdate',
          scopedSlots: { customRender: 'newUpdate' }
        },
        {
          title: '启用状态',
          dataIndex: 'encode',
          align: 'center',
          scopedSlots: { customRender: 'encode' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: parameter => {
        return templateList(
          Object.assign(parameter, this.queryParam, {
            school_id: this.$store.state.user.school,
            keywords: this.keywords
          })
        ).then(res => {
          return res
        })
      },
      templateModal: false,
      createModal: false,
      previewModal: false, //预览模板
      sureLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      templateType: 'creat',
      form: {
        name: '',
        type: undefined,
        link_title: '',
        abstract: '',
        image: './uploads/global/share/1.png'
      },
      pics: [],
      creat_list: [],
      link_title_index: 0, //textarea光标下标
      abstract_index: 0, //textarea光标下标
      preview_title: '', //预览标题
      preview_content: '' //预览内容
    }
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    changeDate(date, dateString) {
      this.queryParam.start_time = dateString[0]
      this.queryParam.end_time = dateString[1]
    },
    changeSwitch(e, data) {
      let a = 1
      if (data == 1) {
        a = 2
      }
      openOrClose(
        {
          is_enable: a
        },
        e
      )
        .then(res => {
          this.$refs.template.refresh()
        })
        .catch(err => {
          this.$message.error(err.data.message || '切换状态失败,请稍后重试')
        })
    },
    changeFormImage(e) {
      this.form.image = e
    },
    sliceTitle(e, index) {
      this.form.link_title = this.insertStr(this.form.link_title, index, e)
    },
    sliceAbstract(e, index) {
      this.form.abstract = this.insertStr(this.form.abstract, index, e)
    },
    insertStr(soure, start, newStr) {
      return soure.slice(0, start) + newStr + soure.slice(start)
    },
    changeLinkTitleIndex(e, data) {
      this.link_title_index = e
    },
    changeLinkContentIndex(e, data) {
      this.abstract_index = e
    },
    edit(e) {
      this.templateType = 'edit'
      this.form = JSON.parse(JSON.stringify(e))
      this.createModal = true
    },
    showDeleteConfirm(e) {
      let that = this
      that.$confirm({
        title: '删除模板?',
        content: '删除后，不会影响已分享的链接。此操作不能撤销，是否确认删除？',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          delTemplate(e)
            .then(res => {
              that.$message.success('删除成功')
              that.$refs.template.refresh()
            })
            .catch(err => {
              that.$message.error(err.data.message || '删除失败')
            })
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    submit(e) {
      if (!this.form.name) {
        this.$message.error('请输入模板名称')
        return
      } else if (!this.form.type) {
        this.$message.error('请选择模板类型')
        return
      } else if (!this.form.link_title) {
        this.$message.error('请输入链接标题')
        return
      } else if (!this.form.abstract) {
        this.$message.error('请输入链接摘要')
        return
      } else if (!this.form.image) {
        this.$message.error('请选择模板配图')
        return
      }
      if (e == 'creat') {
        let params = JSON.parse(JSON.stringify(this.form))
        params.school_id = this.$store.state.user.school
        this.sureLoading = true
        createTemplate(params)
          .then(res => {
            this.sureLoading = false
            this.createModal = false
            this.$message.success('创建成功')
            this.$refs.template.refresh()
          })
          .catch(err => {
            this.$message.error(err.data.message || '创建失败，请稍后重试~')
            this.sureLoading = false
          })
      } else {
        let params = JSON.parse(JSON.stringify(this.form))
        params.school_id = this.$store.state.user.school
        this.sureLoading = true
        editTemplate(params, params.id)
          .then(res => {
            this.sureLoading = false
            this.createModal = false
            this.$message.success('修改成功')
            this.$refs.template.refresh()
          })
          .catch(err => {
            this.$message.error(err.data.message || '修改失败，请稍后重试~')
            this.sureLoading = false
          })
      }
    },
    showPreview(e) {
      this.form = e
      this.previewModal = true
    },
    addModel() {
      this.templateType = 'creat'
      this.createModal = true
    }
  },
  created() {
    creatorList({ school_id: this.$store.state.user.school })
      .then(res => {
        this.creat_list = res
      })
      .catch(err => {
        this.$message.error(err.data.message || '获取创建人列表失败，请稍后重试')
      })
    this.pics = [
      './uploads/global/share/1.png',
      './uploads/global/share/2.png',
      './uploads/global/share/3.png',
      './uploads/global/share/4.png',
      './uploads/global/share/5.png'
    ]
  },
  watch: {
    'form.link_title'(val) {
      let str = val
      str = str.replace(/#学员姓名#/g, '小明')
      str = str.replace(/#校区名称#/g, this.$store.state.user.school_name || '')
      str = str.replace(/#档案内容#/g, '春游的快乐剪影')
      str = str.replace(/#作业标题#/g, '完成一篇500字的作文')
      str = str.replace(/#作业类型#/g, '打卡作业')
      str = str.replace(/#老师#/g, '王老师')
      str = str.replace(/#班级名称#/g, '绘画培训1班')
      str = str.replace(/#上课老师#/g, '王老师')
      str = str.replace(/#考试名称#/g, '上学期第一阶段检测')
      str = str.replace(/#考试科目#/g, '绘画')
      this.preview_title = str
    },
    'form.abstract'(val) {
      let str = val
      str = str.replace(/#学员姓名#/g, '小明')
      str = str.replace(/#校区名称#/g, this.$store.state.user.school_name || '')
      str = str.replace(/#档案内容#/g, '春游的快乐剪影')
      str = str.replace(/#作业标题#/g, '完成一篇500字的作文')
      str = str.replace(/#作业类型#/g, '打卡作业')
      str = str.replace(/#老师#/g, '王老师')
      str = str.replace(/#班级名称#/g, '绘画培训1班')
      str = str.replace(/#上课老师#/g, '王老师')
      str = str.replace(/#考试名称#/g, '上学期第一阶段检测')
      str = str.replace(/#考试科目#/g, '绘画')
      this.preview_content = str
    },
    createModal(val) {
      if (val == false) {
        this.form = {
          name: '',
          type: null,
          link_title: '',
          abstract: '',
          image:  './uploads/global/share/1.png'
        }
      }
    },
    queryParam: {
      handler(newName, oldName) {
        this.$refs.template.refresh()
      },
      //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true // 开启深度监听，默认是false
    }
  }
}
</script>

<style lang="less" scoped>
.createTemplate {
  max-height: 560px;
  .top_tips {
    border: 1px solid #91d5ff;
    background: #e6f7ff;
    border-radius: 4px;
    height: 30px;
    padding: 5px 12px;
    color: #666;
    max-width: 680px;
  }
  .display_flex {
    display: flex;
    .left_div {
      padding-right: 20px;
      .left_title {
        padding: 16px 0;
        font-size: 16px;
        color: #333;
        margin-bottom: 0;
      }
      .left_content {
        width: 270px;
        height: 404px;
        padding: 16px 8px 24px 11px;
        background-color: #fff;
        -webkit-box-shadow: 0 1px 18px 0 rgba(170, 187, 219, 0.3);
        box-shadow: 0 1px 18px 0 rgba(170, 187, 219, 0.3);
        border-radius: 3px;
        .first {
          .first_title {
            padding-bottom: 12px;
            color: #333;
            font-family: PingFangSC-Regular, PingFang SC;
          }
          .first_content {
            width: 250px;
            height: 124px;
            background: #f0f0f0;
            -webkit-box-shadow: 0 1px 18px 0 rgba(170, 187, 219, 0.3);
            box-shadow: 0 1px 18px 0 rgba(170, 187, 219, 0.3);
            border-radius: 3px;
            padding: 24px 16px 12px;
            display: flex;
            .left_headimg {
              img {
                width: 24px;
                height: 24px;
                border-radius: 4px;
                margin-right: 8px;
              }
            }
            .right_content {
              background: #fff;
              width: 100%;
              padding: 4px;
              border-radius: 4px;
              .title_text {
                margin-bottom: 4px;
                color: #333;
                padding: 0;
                font-size: 12px;
                line-height: 14px;
                font-weight: 500;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .content_text {
                display: flex;
                .content_left {
                  flex: 1 1;
                  font-size: 12px;
                  color: #666;
                  line-height: 14px;
                  font-weight: 500;
                  text-overflow: -o-ellipsis-lastline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 3;
                  -webkit-box-orient: vertical;
                }
                .content_right {
                  img {
                    width: 42px;
                    height: 42px;
                  }
                }
              }
            }
          }
        }
        .second {
          margin-top: 20px;
          .second_title {
            color: #333;
            margin-bottom: 15px;
          }
          .second_content {
            border: 1px solid #eee;
            padding: 16px 8px;
            display: flex;
            .second_left {
              img {
                width: 24px;
                height: 24px;
                border-radius: 4px;
                margin-right: 8px;
              }
            }
            .second_right {
              .title_text {
                width: 100%;
                padding-bottom: 4px;
                font-size: 12px;
                font-weight: 500;
                color: #333;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }
              .content_text {
                display: flex;
                background-color: #f9f9f9;
                border-radius: 3px;
                padding: 4px;
                margin-bottom: 4px;
                .content_left {
                  margin-right: 4px;
                  img {
                    width: 28px;
                    height: 28px;
                  }
                }
                .content_right {
                  flex: 1 1;
                  font-size: 12px;
                  font-weight: 500;
                  color: #333;
                  line-height: 14px;
                  text-overflow: -o-ellipsis-lastline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
              }
              .time_text {
                display: flex;
                justify-content: space-between;
                .left {
                  font-size: 9px;
                  color: #ccc;
                }
                .right {
                  background: #f0f0f0;
                  padding: 0 6px;
                  height: 10px;
                  font-weight: 500;
                  line-height: 10px;
                }
              }
            }
          }
        }
      }
    }
    .right_div {
      width: 380px;
      margin-left: 10px;
      .right_title {
        padding: 16px 0;
        font-size: 16px;
        color: #333;
        margin-bottom: 0;
      }
    }
  }
}
.system_default_tags {
  display: inline-block;
  padding: 0 7px;
  margin-left: 4px;
  font-size: 12px;
  line-height: 17px;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 2px;
}
.template_btn {
  display: flex;
  justify-content: space-between;
  span {
    cursor: pointer;
  }
}
.template_name {
  display: flex;
  .template_img {
    img {
      width: 50px;
      height: 50px;
      border-radius: 2px;
    }
  }
  .template_nameExpand {
    padding-left: 8px;
    .name {
      .template_title {
        font-size: 14px;
        color: #333;
        font-weight: 700;
      }
    }
  }
  .creator_info {
    .creator_name {
      color: #666;
    }
  }
}
.tips_text {
  margin-bottom: 16px;
  color: #999;
}
.forExample {
  .title {
    margin-bottom: 12px;
    font-weight: 400;
    font-size: 16px;
    color: #333;
  }
  .shareWay {
    display: flex;
    .first,
    .second {
      flex: 1 1;
      .title {
        color: #333;
        margin-bottom: 8px;
      }
      .content {
        width: 225px;
        height: 138px;
        background: #fff;
        -webkit-box-shadow: 0 1px 18px 0 rgba(170, 187, 219, 0.3);
        box-shadow: 0 1px 18px 0 rgba(170, 187, 219, 0.3);
        border-radius: 3px;
        padding: 24px 8px 12px;
        display: flex;
        .left {
          img {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            margin-right: 8px;
          }
        }
      }
    }
    .first {
      .content {
        background: #f0f0f0;
        .right {
          background: #fff;
          width: 100%;
          padding: 4px;
          border-radius: 4px;
          .title_text {
            margin-bottom: 4px;
            color: #333;
            padding: 0;
            font-size: 12px;
            line-height: 14px;
            font-weight: 500;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .content_text {
            display: flex;
            .content_left {
              flex: 1 1;
              font-size: 12px;
              color: #666;
              line-height: 14px;
              font-weight: 500;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
            .content_right {
              img {
                width: 42px;
                height: 42px;
              }
            }
          }
        }
      }
    }
    .second {
      .content {
        .right {
          .title_text {
            width: 100%;
            padding-bottom: 4px;
            font-size: 12px;
            font-weight: 500;
            color: #333;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .content_text {
            display: flex;
            background-color: #f9f9f9;
            border-radius: 3px;
            padding: 4px;
            margin-bottom: 4px;
            .content_left {
              margin-right: 4px;
              img {
                width: 28px;
                height: 28px;
              }
            }
            .content_right {
              flex: 1 1;
              font-size: 12px;
              font-weight: 500;
              color: #333;
              line-height: 14px;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .time_text {
            display: flex;
            justify-content: space-between;
            .left {
              font-size: 9px;
              color: #ccc;
            }
            .right {
              background: #f0f0f0;
              padding: 0 6px;
              height: 10px;
              font-weight: 500;
              line-height: 10px;
            }
          }
        }
      }
    }
  }
}
.template_imgArr {
  width: 290px;
  display: flex;
  flex-wrap: wrap;
  .templateImg {
    margin: 0 12px 12px 0;
    position: relative;
    cursor: pointer;
    img {
      width: 60px;
      height: 60px;
      border-radius: 4px;
    }
    .active {
      position: absolute;
      right: -10px;
      top: -8px;
    }
  }
}
#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}
</style>